<div class="text-xl font-medium p-4">{{ 'PAC.Xpert.LongTermMemory' | translate: {Default: 'Long-term Memory'} }}</div>

<div class="flex justify-between p-4">
  <ngm-search [formControl]="searchControl" />
  <button type="button" class="btn btn-medium pressable danger" (click)="clearMemory()">{{ 'PAC.Xpert.ClearMemory' | translate: {Default: 'Clear memory'} }}</button>
</div>

<ngm-table class="flex-1 overflow-hidden text-sm" displayDensity="compact" paging
  [columns]="columns()"
  [data]="filterdData()"
/>

<div class="sticky bottom-0 p-4 rounded-bl-2xl flex flex-col justify-start items-start">
  <div class="text-lg p-2">
    {{ 'PAC.Xpert.SemanticSearchTest' | translate: {Default: 'Semantic search test'} }}
  </div>
  <div class="relative w-full p-[5.5px] max-h-[150px] bg-white border-[1.5px] border-gray-200 rounded-xl mb-2">
    <textarea class="outline-none w-full pl-2 pr-16" matInput [(ngModel)]="input"
      cdkTextareaAutosize
      cdkAutosizeMinRows="1"
      cdkAutosizeMaxRows="5"
      (keydown)="onKeydown($event)"
    ></textarea>
    <div class="absolute bottom-1 h-8 right-2 flex items-center">
      <div class="mx-2 w-[1px] h-4 bg-black opacity-5"></div>

      @if (loading()) {
        <button class="w-8 h-8 flex justify-center items-center rounded-full border-light hover:shadow-md"
          (click)="stop()">
          <i class="ri-stop-fill"></i>
        </button>
      } @else {
        <button class="group action-btn action-btn-md primary"
          [disabled]="loading() || !input()"
          (click)="onSearch()">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
            <g id="send-03">
              <path id="Solid" d="M18.4385 10.5535C18.6111 10.2043 18.6111 9.79465 18.4385 9.44548C18.2865 9.13803 18.0197 8.97682 17.8815 8.89905C17.7327 8.81532 17.542 8.72955 17.3519 8.64403L3.36539 2.35014C3.17087 2.26257 2.97694 2.17526 2.81335 2.11859C2.66315 2.06656 2.36076 1.97151 2.02596 2.06467C1.64761 2.16994 1.34073 2.4469 1.19734 2.81251C1.07045 3.13604 1.13411 3.44656 1.17051 3.60129C1.21017 3.76983 1.27721 3.9717 1.34445 4.17418L2.69818 8.25278C2.80718 8.58118 2.86168 8.74537 2.96302 8.86678C3.05252 8.97399 3.16752 9.05699 3.29746 9.10816C3.44462 9.1661 3.61762 9.1661 3.96363 9.1661H10.0001C10.4603 9.1661 10.8334 9.53919 10.8334 9.99943C10.8334 10.4597 10.4603 10.8328 10.0001 10.8328H3.97939C3.63425 10.8328 3.46168 10.8328 3.3148 10.8905C3.18508 10.9414 3.07022 11.0241 2.98072 11.1309C2.87937 11.2519 2.82459 11.4155 2.71502 11.7428L1.3504 15.8191C1.28243 16.0221 1.21472 16.2242 1.17455 16.3929C1.13773 16.5476 1.07301 16.8587 1.19956 17.1831C1.34245 17.5493 1.64936 17.827 2.02806 17.9327C2.36342 18.0263 2.6665 17.9309 2.81674 17.8789C2.98066 17.8221 3.17507 17.7346 3.37023 17.6467L17.3518 11.355C17.542 11.2695 17.7327 11.1837 17.8815 11.0999C18.0197 11.0222 18.2865 10.861 18.4385 10.5535Z" fill="currentColor"></path>
            </g>
          </svg>
        </button>
      }
    </div>
  </div>
</div>

@if (loading()) {
  <ngm-spin class="absolute left-0 top-0 w-full h-full flex justify-center items-center"></ngm-spin>
}

<ng-template #scoreTemplate let-score>
  <div>{{ score | number:'0.0-2' }}</div>
</ng-template>
<ng-template #userTemplate let-user="createdBy">
  <pac-user-profile-inline [user]="user" small class="my-1" />
</ng-template>
<ng-template #dateTemplate let-createdAt>
  {{ createdAt | relative}}
</ng-template>
<ng-template #valueTemplate let-value>
  <div class="rounded-lg p-1 my-1 whitespace-pre hover:bg-gray-50">{{value | json}}</div>
</ng-template>

<ng-template #actionTemplate let-id="id" let-value="value">
  <div class="flex items-center">
    <button class="btn btn-ghost group px-2 py-1 rounded-md bg-transparent danger hover:bg-hover-bg" type="button"
      (click)="delete(id, value)">
      <div class="">
        <i class="ri-delete-bin-line"></i>
      </div>
    </button>
  </div>
</ng-template>

<ng-template #actionMenu let-id="id" let-value="value">
  <div cdkMenu class="cdk-menu__medium">
    <!-- <div cdkMenuItem  >
      <i class="ri-edit-line mr-1"></i>
        {{ 'PAC.ACTIONS.Edit' | translate: {Default: 'Edit'} }}</div>
    <div class="w-full border-b border-solid border-divider-regular my-1"></div> -->
    <div cdkMenuItem class="danger" (click)="delete(id, value)">
      <i class="ri-delete-bin-line mr-1"></i>
        {{ 'PAC.ACTIONS.Delete' | translate: {Default: 'Delete'} }}
    </div>
  </div>
</ng-template>